<script setup>
// 引入组件之后就可以直接使用 不需要再使用 components 选项
import Info from './Info.vue'
import {reactive, ref, defineProps, defineEmits, inject, onMounted, onBeforeMount} from 'vue'
// script 标签加上 setup 属性 可以类比 setup() 函数
console.log("创建TestVue实例")
// 里面声明的所有常量或者变量\函数 会直接暴露给模板 响应式数据 使用 ref() 返回一个 ref响应式对象 通过 value属性修改值
// 如果是对象 使用 reactive 获得一个响应式对象
const msg = ref("hello Vue")
const user = reactive({username: 'zs', password: '123456'})
// 获取 props  defineProps(['key1', 'key2']) key1 在父组件调用的时候可以传递的属性
const props = defineProps(['name', 'age'])
console.log(props.name)
console.log(props.age)
// 获取自定义事件 自定义事件 名称 change 父组件上 可以监听 change 事件
const emit = defineEmits(['change', 'c'])
console.log(emit)
// inject('key')
const message = inject('message')
console.log("message", message)
function cli() {
    // 触发事件
    emit('change', msg)
}
function sayHi() {
    // window.alert(msg)
    msg.value = 'hi'
    user.username = '张三'
}

onMounted(() => {
    console.log("挂载完毕")
})

onBeforeMount(() => {
    console.log("beforeMount")
})
</script>

<!--<script>-->
<!--export default {-->
<!--    data() {-->
<!--        return {-->
<!--            msg: 'hello vue'-->
<!--        }-->
<!--    },-->
<!--    methods: {-->
<!--        sayHi() {-->
<!--            window.alert(this.msg)-->
<!--        }-->
<!--    }-->
<!--}-->
<!--</script>-->

<template>
    <h2>hello vue</h2>
    <button @click="sayHi">{{ msg }}</button>
    <p>username: {{ user.username}}</p>
    <Info />
    <button @click="cli">点击一下</button>
</template>

<style scoped>

</style>